<!-- 分院业务员更多 -->
<template>
  <div class="more">
    <mt-header fixed title="业务员列表">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="curr_back">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="home_tab">
      <div class="tab_name">
        <span>{{ Name }}</span>
        <select
          name="public-choice"
          v-model="couponSelected"
          @change="getCouponSelected"
        >
          <option
            :value="coupon.id"
            v-for="(coupon, index) in couponList"
            :key="index"
            >{{ coupon.name }}</option
          >
        </select>
      </div>
      <div class="intxt">
        <form action="javascript:return true;">
          <input
            type="search"
            placeholder="搜索用户名"
            v-model="nickName"
            @keyup.13="show()"
            ref="input1"
          />
        </form>
        <img class="txt" src="../../../static/image/CombinedShape.png" />
      </div>
    </div>
    <div class="ranking"         
        v-infinite-scroll="getCardList"
        infinite-scroll-disabled="moreLoading"
        infinite-scroll-distance="10"
        v-if="list.length != 0">
        <div
          class="ran_oitem"
          v-for="(item, index) in list"
          :key="index"
          @click="listdetails(item)"
        >
          <span
            style="margin-left:0.32rem;width:3.58rem;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;"
            >{{ item.nickName }}</span
          >
          <span style="margin-right:0.53rem;color:#666666;"
            >开单：{{ item.directPromotionQuantity }}</span
          >
        </div>
    </div>
    <div class="ranking" v-else>
      <img src="../../../static/image/nothing.png" alt />
      <div class="ranking_zi">没有更多数据</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Salesmanlist } from "../../api/api";
import querystring from "query-string";
import { Header, InfiniteScroll, Toast, Indicator } from "mint-ui";

export default {
  name: "More",
  data() {
    return {
      couponList: [
        {
          id: "1",
          name: "直接推广订单数"
        },
        {
          id: "2",
          name: "直接推广订单总额"
        },
        {
          id: "3",
          name: "间接推广订单数"
        },
        {
          id: "4",
          name: "间接推广订单金额"
        },
        {
          id: "5",
          name: "累计收益"
        }
      ],
      couponSelected: "1",
      Name: "",
      nickName: "",
      list: [],
      pageNo: 1,
      moreLoading:false,
      iosShow: false
    };
  },
  created() {
    this.couponSelected = this.couponList[0].id;
    this.Phonetype();
  },
  methods: {
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    },
    //默认选中获取
    getCouponSelected() {
      console.log(this.couponSelected);
      this.pageNo = 1;
      this.moreLoading = false;
      this.list = [];
      var params = {
        pageNo: 1,
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
        pageSize: 10,
        orderType: this.couponSelected
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.list = res.data.data;
        } else {
          Toast(res.data.message);
        }
      });
    },
    //点击跳转业务员详情
    listdetails(item) {
      this.$router.push({
        path: "/Branch/branchdetail",
        query: { openId: item.openId }
      });
    },
    //搜索
    show() {
      console.log(this.list)
      this.list = [];
      console.log(this.list)
      this.$refs.input1.blur();
      this.pageNo = 1;
       this.getCardList();
     console.log(this.list)
      // this.moreLoading = true;
      // var params = {
      //   pageNo: this.pageNo,
      //   branchId: JSON.parse(localStorage.getItem("user")).branchId,
      //   pageSize: 10,
      //   nickName: this.nickName,
      //    orderType: this.couponSelected,
      // };
      // var params = querystring.stringify(params);
      // var a = localStorage.getItem("token");
      // a = JSON.parse(a);
      // Salesmanlist(params, a).then(res => {
      //   if (res.data.code == 1) {
      //     let newArr =[];
      //      res.data.data.forEach(element => {
      //           newArr.push(element);
      //       });
      //     this.list = newArr;
      //    console.log(newArr)
      //     console.log(this.list)
      //     //  this.moreLoading = false;
      //     // Indicator.close();
      //   } else {
      //     // Indicator.close();
      //     Toast(res.data.message);
      //   }
      // });
    },
    //上拉加载
    getCardList() {
      Indicator.open("加载中...");
      this.moreLoading = true;
      var params = {
        pageNo: this.pageNo,
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
        pageSize: 10,
        orderType: this.couponSelected,
        nickName: this.nickName
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then(res => {
        if (res.data.code == 1) {
        if (res.data.data.length > 0) {
          setTimeout(() => {
             this.pageNo ++;
            res.data.data.forEach(element => {
                this.list.push(element);
            });
            this.moreLoading = false;
          }, 1000);
           
          } else {
            this.moreLoading = true;
          }
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    }
  },
  mounted() {
    this.Name = JSON.parse(localStorage.getItem("user")).nickName;
    this.getCardList();
  }
};
</script>
<style lang="scss" scoped>
.mint-header {
  background: #ffffff;
  color: #333333;
}
.more {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.curr_back {
  width: 100%;
  height: 1.7rem;
  position: relative;
}
.curr_back img {
  width: 100%;
  height: 100%;
}
.select_box {
  background: #fff;
  width: 1.96rem;
  margin-left: 0.25rem;
  position: relative;
  height: 0.72rem;
  background: #dfe2ee;
}
.select {
  box-sizing: border-box;
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
}
.select_text {
  flex: 1;
  width: 1.24rem;
  font-size: 0.26rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select_img {
  width: 0.26rem;
  height: 0.14rem;
  display: block;
  transition: transform 0.3s;
}
.select_img_rotate {
  transform: rotate(180deg);
}

.home_tab {
  width: 100%;
  height: 1.4rem;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  padding: 0.29rem 0;
  border-bottom: 0.02rem solid #eeeeee;
}
.home_tab .tab_name {
  display: flex;
  margin-right: 0.17rem;
  color: #212c67;
  font-size: 0.3rem;
  span {
    display: inline-block;
    width: 1.2rem;
    padding: 0 0.2rem;
  }
}
.tab_name select {
  width: 2.3rem;
  height: 0.72rem;
  font-size: 0.26rem;
  color: #333333;
  border: none;
  background: #dfe2ee;
  outline: none;
  margin-left: 0.08rem;
  margin-top: 0.07rem;
}
.tab_name select option {
  font-size: 0.26rem;
  color: #333333;
  background: #ffffff;
  outline: none;
}
.home_tab input {
  width: 3.1rem;
  height: 0.72rem;
  font-size: 0.26rem;
  box-sizing: border-box;
  padding: 0.2rem;
  color: #333333;
  background: #dfe2ee;
  border: none;
  outline: none;
  display: block;
}
.txt {
  width: 0.26rem;
  height: 0.26rem;
  position: absolute;
  right: 0.2rem;
  top: 0.26rem;
}
.intxt {
  position: relative;
}

.hom_back {
  width: 100%;
  height: auto;
  margin-top: 0.3rem;
}

.ranking {
  width: 100%;
  height:71vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 0.3rem;
  background: linear-gradient(
    180deg,
    rgba(248, 249, 254, 1) 0%,
    rgba(249, 249, 249, 1) 100%
  );

  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top: 1.8rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
  margin-bottom: 3rem;
}

.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0px 4px 28px 0px rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}
.select_box {
  background: #fff;
  width: 1.96rem;
  margin-left: 0.25rem;
  position: relative;
  height: 0.72rem;
  background: #dfe2ee;
}
.select {
  box-sizing: border-box;
  width: 100%;
  height: 0.7rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
}
.select_text {
  flex: 1;
  width: 1.24rem;
  font-size: 0.26rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select_img {
  width: 0.26rem;
  height: 0.14rem;
  display: block;
  transition: transform 0.3s;
}
.select_img_rotate {
  transform: rotate(180deg);
}
.option_box {
  position: absolute;
  top: 0.7rem;
  width: 100%;
  border: 0.02rem solid #efefef;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
}
.option {
  display: block;
  line-height: 0.4rem;
  font-size: 0.26rem;
  border-bottom: 0.02rem solid #efefef;
  padding: 0.1rem;
  color: #333333;
}
</style>